<template>
  <div class="alarm-summary">
    <el-row>
      <el-col :span="24">
        <dynForm
          :info-form="searchForm"
          :search-tags="searchTags"
          :select-list="selectList">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch"
          >
            {{ $t("search") }}</el-button
            >
        </dynForm>
      </el-col>
    </el-row>
    <!-- 表单部分 -->
    <el-card v-loading="loading" shadow="never">
      <div v-if="echatsData.length" class="echart-box">
        <barEchart :echats-data="echatsData"/>
      </div>
    </el-card>
  </div>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import alarmHistoryApi from '@/api/alarm/history'
import { eqpnamelist } from '@/api/equipment/eqpbase'
import { getAllLevel } from '@/api/alarm/level'
import barEchart from './components/barEchart'
export default {
  name: 'AlarmSummary',
  components: { barEchart },
  mixins: [mySetting],
  props: {},
  data() {
    return {
      loading: false,
      searchForm: {},
      searchTags: [
        { label: this.$t('Abscissa'), prop: 'type', tag: 'DynSelect' },
        { label: this.$t('eqpId'), prop: 'eqpName', tag: 'DynSelect' },
        { label: this.$t('alarmId'), prop: 'alarmId', tag: 'DynInput' },
        { label: this.$t('AlarmLevel'), prop: 'level', tag: 'DynSelect' },
        { label: this.$t('description'), prop: 'description', tag: 'DynInput' },
        { label: this.$t('timeInterval'), prop: '', tag: 'Dyndaterange', event: (value) => {
          this.searchForm.startTime = Array.isArray(value) ? value[0] : null
          this.searchForm.endTime = Array.isArray(value) ? value[1] : null
        } }
      ],
      selectList: {},
      echatsData: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getTypeList()
    this.getEqpList()
    this.getLevelList()
  },
  mounted() {},
  methods: {
    doSearch() {
      this.initList()
    },
    async initList() {
      this.loading = true
      const res = await alarmHistoryApi.getSummary(this.$clearNull(this.searchForm))
      this.loading = false
      // this.$betterTips(res)
      this.echatsData = Array.isArray(res.data) ? res.data : []
    },
    async getEqpList() {
      const res = await eqpnamelist()
      this.$set(this.selectList, 'eqpName', res.data)
    },
    getTypeList() {
      const res = [{ id: 1, name: this.$t('eqpType') }, { id: 2, name: this.$t('AlarmCode') }, { id: 4, name: this.$t('SystemType') }, { id: 5, name: this.$t('AlarmLevel') }]
      this.$set(this.selectList, 'type', res)
    },
    async getLevelList() {
      const res = await getAllLevel()
      this.$set(this.selectList, 'level', res.data)
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/defaultStyle.scss";
// .el-card {
//   // margin: 0 auto;
//   // background-color: red;
// }
.echart-box{
  width: 80%;
  height: 500px;
  margin: 0 auto;
}
</style>
